import React, { Component } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Calendar, Radio, Card, Col, Row, Table } from 'antd';
import MyAchievement from '@/pages/workbench/components/MyAchievement';

const columns = [
  {
    title: '服务号',
    dataIndex: 'serviceNo',
    key: 'serviceNo',
    render(val: React.ReactNode) {
      return <a>{val}</a>;
    },
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
  },
  {
    title: '跟进人',
    dataIndex: 'merchandiser',
    key: 'merchandiser',
  },
  {
    title: '跟进时间',
    dataIndex: 'updateTime',
    key: 'updateTime',
  },
];

const dataSource = [
  {
    key: '1',
    serviceNo: 'S0000000001',
    status: '询问中',
    merchandiser: 'Ron',
    updateTime: '2019-09-24 10:25',
  },
  {
    key: '2',
    serviceNo: 'S0000000002',
    status: '待报价',
    merchandiser: '吴文博',
    updateTime: '2019-09-24 10:23',
  },
];

const columns2 = [
  {
    title: '今日排名',
    dataIndex: 'serviceNo',
    key: 'serviceNo',
    render(val: React.ReactNode) {
      return <a>{val}</a>;
    },
  },
  {
    title: '本周排名',
    dataIndex: 'serviceNo',
    key: 'serviceNo',
    render(val: React.ReactNode) {
      return <a>{val}</a>;
    },
  },
  {
    title: '姓名',
    dataIndex: 'status',
    key: 'status',
  },
];

const dataSource2 = [
  {
    key: '1',
    serviceNo: '1',
    status: '何霖',
    merchandiser: 'Ron',
    updateTime: '2019-09-24 10:25',
  },
  {
    key: '2',
    serviceNo: '2',
    status: '吴文博',
    merchandiser: '吴文博',
    updateTime: '2019-09-24 10:23',
  },
  {
    key: '3',
    serviceNo: '3',
    status: '袁思吉',
    merchandiser: '吴文博',
    updateTime: '2019-09-24 10:23',
  },
];

class LocalModule extends Component {
  state = {};

  render() {
    return (
      <PageHeaderWrapper>
        <Row gutter={16}>
          <Col sm={16}>
            <Row style={{ marginBottom: 16 }}>
              <Col sm={24}>
                <Card
                  bordered={false}
                  title="我的待办"
                  bodyStyle={{ padding: 1, paddingBottom: 0 }}
                >
                  <Table
                    columns={columns}
                    dataSource={dataSource}
                    size="middle"
                    pagination={false}
                  ></Table>
                </Card>
              </Col>
            </Row>
            <Row style={{ marginBottom: 16 }}>
              <Col sm={24}>
                <Card
                  bordered={false}
                  title="我的业绩"
                  bodyStyle={{ padding: 1, paddingBottom: 0 }}
                  extra={
                    <Radio.Group value="large">
                      <Radio.Button value="large">本周</Radio.Button>
                      <Radio.Button value="default">本月</Radio.Button>
                      <Radio.Button value="small">今年</Radio.Button>
                    </Radio.Group>
                  }
                >
                  <MyAchievement></MyAchievement>
                </Card>
              </Col>
            </Row>
          </Col>
          <Col sm={8}>
            <Row style={{ marginBottom: 16 }}>
              <Col sm={24}>
                <Card bordered={false} title="公告">
                  <p>为了更好的适应时代发展，洲博通组织全体人员于23号5点在大会议室培训讲座</p>
                </Card>
              </Col>
            </Row>
            <Row>
              <Col sm={24}>
                <Card bordered={false}>
                  <Calendar fullscreen={false} />
                </Card>
              </Col>
            </Row>
            <Row>
              <Col sm={24}>
                <Card bordered={false}>
                  <Table
                    columns={columns2}
                    dataSource={dataSource2}
                    size="middle"
                    pagination={false}
                  ></Table>
                </Card>
              </Col>
            </Row>
          </Col>
        </Row>
      </PageHeaderWrapper>
    );
  }
}

export default LocalModule;
